import React, {Component} from 'react'
import '../../../../static/css/article.less'
import Commit from '../../../../components/commit/commit'
import Navigation from '../../../../components/navigation/navigation'
import Footer from '../../../../components/footer/footer'
import { StarOutlined,StarFilled,UpOutlined,DownOutlined } from '@ant-design/icons'



class ArticleChapter extends Component{
    constructor(props) {
        super(props);
        this.state={
            list:this.props.chapter,
            isOpen:false
        }
    }
    changeList(){
        console.log(this.state.isOpen)
        if(this.state.isOpen){
            this.setState({isOpen:false})
        }else{
            this.setState({isOpen:true})
        }
    }
    render(){
        var chapters = this.state.list
        var isOpen = this.state.isOpen
        return(
            <>
                <div className='chapterSelect' onClick={this.changeList.bind(this)}>
                    {
                        isOpen ?
                            (<p>章节<DownOutlined /></p>)
                            :
                            (<p>章节<UpOutlined /></p>)
                    }
                </div>
                <hr/>
                {
                    isOpen ?
                        ( <ul>
                            {
                                chapters.map((item)=>
                                    <li key={item.chapter}>{item.title}</li>
                                )
                            }
                        </ul>)
                        : ''
                }
                </>
        )
    }
}


class ArticleLiked extends Component{
    constructor(props) {
        super(props);
        this.state={
            liked:this.props.liked,
            likeNumber:this.props.likeNumber
        }
    }
    changeLike(){
        var likeNumber = this.state.likeNumber
        var liked = this.state.liked
        if(liked){
            // true
            likeNumber--
            this.setState({likeNumber:likeNumber})
        }else{
            likeNumber++
            this.setState({likeNumber:likeNumber})
        }
        this.setState({liked:!liked})
        setTimeout(()=>{
            this.props.toData(this.state)
        },100)
    }

    render() {
        var isLike = this.state.liked
        return (
            <div className='like' >
                <div onClick={this.changeLike.bind(this)}>
                    {
                        isLike ? ( <StarFilled className='likeIcon' /> )
                            : ( <StarOutlined className='likeIcon' />)
                    }
                </div>
                <p>{this.state.likeNumber}</p>
            </div>
        );
    }
}


class ArticleView extends Component{
    constructor(props) {
        super(props);
        this.state={
            content:'文章内容文章内容',
            info:'文章简介',
            title:'文章标题',
            author:'文章作者',
            date:'文章发布日期',
            likeNumber:100,
            liked:true,
            currentChapter:'',
            chapters:[
                {no:'123231',title:'123',chapter:0},
                {no:'123',title:'2123',chapter:1}
            ]
        }
    }
    componentDidMount(){
        document.title = '文章详情-'+this.state.title
        window.addEventListener('scroll',this.bindHandleScroll)
    }
    componentWillUnmount() {
        window.removeEventListener('scroll',this.bindHandleScroll)
    }
    bindHandleScroll = () =>{
        var articleTitle =  document.querySelector('.articleTitle')
        console.log(articleTitle.offsetTop - document.documentElement.scrollTop)
    }
    createMarkup(){
        return {__html:this.state.content}
    }
    toData(data){
        console.log(data)
        this.setState({likeNumber:data.likeNumber})
        this.setState({ liked:data.liked})
        console.log(this.state)
    }
    toAuthorView(e){
        console.log(e)
        var url1 = '/article/author/'+e
        var win = window.open(url1,'_blank')
        win.focus()
    }
    render() {
        return　(
            <div className='article'>
                <div className='articleNav'>
                    <Navigation/>
                </div>
                    <div className='articleTitle'>
                        <div className='title'>
                            <p>{this.state.title}</p>
                        </div>
                        <div className='author' onClick={()=>{this.toAuthorView(this.state.author)}}>
                            <img alt='alt' src=''/>
                            <p>{this.state.author}</p>
                        </div>
                    </div>

                {/*// 操作按钮 收藏*/}
                <div className='info'>
                    <ArticleLiked liked={this.state.liked} likeNumber={this.state.likeNumber} toData={this.toData.bind(this)}/>
                </div>
                <div className='chapter'>
                  <ArticleChapter chapter={this.state.chapters}/>
                </div>
            <div className='articleView'>
                <div className='articleContent' dangerouslySetInnerHTML={this.createMarkup()}>
                </div>
            </div>
                <Commit/>

                <Footer/>
            </div>
        )
    }
}

export default ArticleView
